<template>
  <div v-if="dialogRes" class="restul">
    <div class="dialogBox-title">
      <div class="icon">
        <div class="icon-1">1</div>
        <span>考核信息</span>
      </div>
      <div style="width: 250px; height: 1; border-top: 1px solid black"></div>
      <div class="icon">
        <div class="icon-2">2</div>
        <span style="color: rgb(167, 167, 167)">计算结果</span>
      </div>
      <img @click="closeRes" src="@/assets/images/modelExam/close.png" alt="" />
    </div>
    <!-- <div class="nav-list">
      <div
        :class="[navId == item.id ? 'show' : '']"
        @click="getNav(item.id)"
        v-for="item in navList"
        :key="item.id"
      >
        {{ item.title }}
      </div>
    </div> -->
    <div class="tabs-box">
      <el-tabs type="border-card">
        <el-tab-pane label="场次考核记录" :lazy="true">
          <Recording></Recording>
        </el-tab-pane>
        <el-tab-pane label="考核汇总">
          <Summary></Summary>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="btn">
      <el-button type="info" @click="getUp">上一步</el-button>
      <el-button type="primary" @click="getOver">完成</el-button>
      <el-button type="info" @click="closeRes">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Summary from '../BaseInfo/Summary.vue'
import Recording from '../BaseInfo/Recording.vue'
const navId = ref(1)
const props = defineProps({
  dialogRes: {
    type: Boolean,
    default: false
  }
})
const getOver = () => {
  emit('getOver', false)
}
const getUp = () => {
  emit('getUp', false)
}
const emit = defineEmits(['closeRes'])

const closeRes = () => {
  emit('closeRes', false)
}

const getNav = (v) => {
  navId.value = v
}
</script>

<style lang="less" scoped>
.restul {
  height: calc(100% - 30px);
  .dialogBox-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    height: 45px;
    border-bottom: 1px solid var(--fold-border-color);

    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }

    .icon {
      display: flex;
      align-items: center;

      span {
        margin-left: 20px;
      }

      .icon-1 {
        background-color: blue;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
      }

      .icon-2 {
        background-color: blue;
        border-radius: 50%;
        border: 1px solid black;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: #fff;
      }
    }
  }
  .tabs-box {
    box-sizing: border-box;
    height: calc(100% - 100px);
    :deep(.el-tabs) {
      height: 100%;
      font-size: var(--content-fontsize);
      .el-tabs__content {
        height: calc(100% - 55px);
        padding: 10px;
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
  .btn {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
  }
}
</style>
